<template>
    <div id="manage">
        <div class="manage_top">
            <div class="form">
                <div style="margin: 15px 20px 0 20px">
                    <zy-select v-if="formConfig" :fromValue="queryForm" :formConfig="formConfig" @search="search" @resetForm="resetForm" :actions="actions"></zy-select>
                </div>
                <div style="height: 40px; display: flex; margin: 10px 20px 0 20px">
                    <div class="table_title">{{ table_title }}管理</div>
                    <div class="btns">
                        <el-button v-for="item in actions" :key="item.label" :icon="item.icon" @click="item.click()">{{ item.label }}</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="manage_bottom">
            <div class="table">
                <div class="table_mask"></div>
                <zy-table :loading="loading" :tableData="tableData" :tableColumn="tableColumn" :pageSize="pagination.pageSize" :total="pagination.total" @changePage="changePage" @changeID="changeID"></zy-table>
            </div>
        </div>
        <zy-form ref="zyform" :dialog="dialog" @add="add" @set="edit"></zy-form>
        <el-dialog :visible.sync="isShow" width="680px" top="12vh" size="mini" :close-on-click-modal="false">
            <el-form>
                <table style="color: #007bff; font-size: 18px; margin-bottom: 20px">
                    <tr>
                        <th></th>
                        <th>A</th>
                        <th>B</th>
                    </tr>
                    <tr v-for="(value, key) in item.offset" :key="key">
                        <td>{{ dict[key] + '(' + key + ')' }}</td>
                        <td style="padding: 10px" v-for="(t, i) in 2" :key="i"><el-input-number v-model="value[i]"></el-input-number></td>
                    </tr>
                </table>
                <el-form-item>
                    <el-button type="primary" @click="setOffset()">确定</el-button>
                    <el-button @click="() => (this.isShow = false)">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { config, formConfig, column } from './formConfig.js'
import SearchManage from '@/components/basic/SearchManage.vue'
import { requestApi, getEigApi, fileApi } from '@/requset/api'
import { deepClone } from '@/plugins/clone.js'

export default {
    extends: SearchManage,
    data() {
        return {
            a: [0, 1],
            b: [1, 2],
            isShow: false,
            table_title: '测点',
            url: 'sensor',
            actions: [
                {
                    label: '导出',
                    icon: 'el-icon-download',
                    click: () => {
                        this.download()
                    },
                    if: () => this.operate,
                },
                {
                    label: '批量删除',
                    icon: 'el-icon-delete',
                    click: () => {
                        this.deletes()
                    },
                    if: () => this.operate,
                },
                {
                    label: '添加',
                    icon: 'el-icon-folder-add',
                    click: () => {
                        this.handleAdd()
                    },
                    if: () => this.operate,
                },
            ],
            dialog: {
                labelWidth: '100px',
                config: [],
                form: {},
                title: '',
            },
            queryForm: {
                page: 1,
                size: 20,
                db_id: 0,
                id: null,
                device_name: null,
                sensor_name: null,
                sensor_type: null,
                status: null,
                scope_id: null,
                scope_id_list: [],
            },
            queryFormC: {
                page: 1,
                size: 20,
                db_id: 0,
                id: null,
                device_name: null,
                sensor_name: null,
                sensor_type: null,
                status: null,
                scope_id: null,
                scope_id_list: [],
            },
            baseForm: {
                device: null,
                sensor_name: null,
                address: null,
                port: null,
                direction: null,
                fs: null,
                sensor_type: null,
                eigenvalue: null,
                status: '离线',
            },
            confirmText: '确认删除此条数据?本次操作会清空该测点在数据库中的表和数据',
            item: {},
            dict: {},
        }
    },
    computed: {
        ...mapState('backstage', ['backstageData', 'backstageList', 'eigenvalueTags', 'sensorType', 'sys_eig']),
        tags() {
            if (this.pagination.total !== undefined) {
                return [{ title: '总数', num: this.pagination.total }, { title: '离线数', num: this.stat.un }, null, { title: '在线数', num: this.stat.on }]
            } else return []
        },
    },
    methods: {
        download() {
            if (this.backstageData.length === 1) {
                this.queryForm.scope_id = this.backstageData[0].value
            }
            if (!this.queryForm.scope_id_list.length && !this.queryForm.scope_id) {
                this.$message.error('请选择导出区域范围！')
                return
            }
            if (!this.queryForm.scope_id) {
                this.queryForm.scope_id = this.queryForm.scope_id_list[this.queryForm.scope_id_list.length - 1]
            }
            fileApi('post', this.url + '/download', { filename: this.backstageList.find((item) => item.id == this.queryForm.scope_id).name + '测点清单.xlsx', scope_id: this.queryForm.scope_id }, true).then((res) => {
                if (res.code == 0) {
                    this.$message.success('导出成功')
                }
            })
        },
        to(data) {
            if (data.eigenvalue) data.eigenvalue = data.eigenvalue.join(',')
            delete data.device
            return data
        },
        BeforeAdd() {
            this.dialog.config = config
        },
        BeforeEdit() {
            this.dialog.config = deepClone(config).slice(1, config.length)
        },
        getlist() {
            this.loading = true
            requestApi('post', this.url + `/getlist`, this.queryForm).then((res) => {
                this.tableData = res.data.data.map((item) => {
                    if (item.eigenvalue) item.eigenvalue = item.eigenvalue.split(',')
                    if (item.offset) item.offset = JSON.parse(item.offset)
                    item.device = [item.group_id, item.company_id, item.factory_id, item.zone_id, item.device_id]
                    return item
                })
                this.pagination = res.data.pagination
                if (res.data.stat) {
                    this.stat = res.data.stat
                }
                this.loading = false
            })
        },
        setOffset() {
            requestApi('post', this.url + '/edit', this.to(deepClone(this.item))).then((res) => {
                if (res.data.code == 0) {
                    this.$message({
                        type: 'success',
                        message: '编辑成功',
                    })
                    this.searchBtn()
                    this.isShow = false
                }
            })
        },
    },
    created() {
        this.searchBtn()
        this.dialog.config = config
        column[column.length - 1].buttons = [
            {
                text: '编辑',
                click: (val) => {
                    this.handleEdit(val)
                },
                icon: 'el-icon-edit',
            },
            {
                text: '设置偏移量',
                click: (val) => {
                    this.isShow = true
                    offset = {}
                    let list = this.sensorType.find((item) => item.id == val.sensor_type).sys_eig.split(',')
                    this.sys_eig.map((item) => {
                        if (list.includes(item.id + '')) {
                            this.dict[item.nickname] = item.name
                            if (val.offset && val.offset[item.nickname]) offset[item.nickname] = val.offset[item.nickname]
                            else offset[item.nickname] = [1, 0]
                        }
                    })
                    this.item = val
                },
                icon: 'el-icon-edit',
            },
            {
                text: '删除',
                click: (val) => {
                    this.delete(val)
                },
                icon: 'el-icon-delete',
            },
        ]
        column[column.length - 1].if = this.operate
        this.tableColumn = column
        let directionTypes = {
            A: 'A轴向',
            H: 'H水平',
            V: 'V垂直',
        }
        this.tableColumn[5].format = (val) => directionTypes[val]
        let dirc = {}
        this.eigenvalueTags.map((item) => {
            dirc[item.id] = item.name
        })
        this.tableColumn[8].tooltip = (form) => (form.eigenvalue !== null ? form.eigenvalue.map((item) => dirc[item]).join(',') : '无特征值')
        let dirc1 = {}
        this.sensorType.map((item) => {
            dirc1[item.id] = item.name
        })
        this.tableColumn[8].format = (val) => dirc1[val]
        formConfig[0].options = this.backstageData
        formConfig[4].options = this.sensorType
        this.formConfig = formConfig
        this.dialog.config[6].options = this.sensorType
        this.dialog.config[6].onChange = (config, form) => {
            if (form.sensor_type) {
                getEigApi({ sensor_type: form.sensor_type }).then((res) => {
                    if (res.data.code == 0) {
                        form.eigenvalue = res.data.data.split(',').map((item) => parseInt(item))
                    }
                })
            }
        }
    },
}
</script>
